<template>
    <div>
        <el-row :gutter="30" class="mt-30 mb-30">
            <el-col :span="24">
                <el-card>
                    <div slot="header" class="clearfix">
                        <h3>推荐商品</h3>
                    </div>
                    <div class="flex">
                        <div class="recommend-list">
                            <router-link :to="{ name: 'productsDetails', params: { id: item.id } }"
                                class="recommend-item" v-for="item in list" :key="item.id">
                                <div class="recommend-img">
                                    <el-image style="width: 120px; height: 120px" :src="item.thumb" fit="fit"
                                        lazy></el-image>
                                </div>
                                <div class="recommend-title text-hide-2">{{ item.title }}</div>
                                <div class="recommend-price">
                                    <span class="price text-red ml-10">￥{{ item.price }}</span>
                                </div>
                            </router-link>
                        </div>
                        <!-- <div class="font-60 text-gray mt-30 mr-30 ml-60">=</div>
                        <div class="height-28">
                            <p>已选择2个推荐商品</p>
                            <p>组合价：<span class="text-red">￥19998.00</span></p>
                            <div class="mt-20">
                                <el-button type="danger">立即购买</el-button>
                            </div>
                        </div> -->
                    </div>
                </el-card>
            </el-col>
        </el-row>
    </div>
</template>

<script>
import { getRecommendGoods } from "@/api/apis";
export default {
    name: "recommend",
    data () {
        return {
            list: []
        }
    },
    mounted () {
        this.getList();
    },
    methods: {
        getList() {
            getRecommendGoods({
                pagesize: 8,
                goods_id: this.$route.params.id
            }).then(res => {
                if (res.code === 1) {
                    this.list = res.data
                }
            })
        }
    }
}
</script>

<style lang="less" scoped>
/deep/.el-checkbox__input.is-checked .el-checkbox__inner,
.el-checkbox__input.is-indeterminate .el-checkbox__inner {
    background-color: #FF0000;
    border-color: #FF0000;
}
/deep/.el-checkbox__inner:hover {
    border-color: #FF0000;
}
.recommend-list {
    display: flex;
    flex-wrap: wrap;
    gap: 56px;
    .recommend-item {
        width: 120px;
        margin-bottom: 10px;
        text-align: center;
        text-decoration: none;
    }

    .recommend-img {
        position: relative;
        margin-bottom: 10px;
        border-radius: 10px;
        overflow: hidden;
        .el-image {
            display: block;
        }
    }
    .recommend-title {
        font-size: 14px;
        color: #333;
        margin-bottom: 10px;
    }

    .recommend-price {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 10px;
    }
}
</style>